import React, {Component} from 'react';
import {Table, Button, message, Tabs,Input} from 'antd';
import "./UpperPartOfTheForm.css"

const TabPane = Tabs.TabPane;

class UpperPartOfTheForm extends Component {
    constructor(props) {
        super(props);
        this.state = {
            Time: [],//第一列的时间变化自动控制
            Data: [],//原始填写的数据
            // [null,null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null],
            // [null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null],
            // [null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null],
            // [null,null,null,null,null,null,null,null],[null,null,null,null,null,null,null,null],
            // [null,null,null,null,null,null,null,null]
            FuHao: ['℃', 'Pa', 'A', 'Pa', '%', 'KV', 'MA'],
            TabChoose: 0,
            // average: [null, null, null, null, null, null, null, null, null,
            //     null, null, null, null, null, null, null, null, null,
            //     null, null, null, null, null, null, null, null, null],//平均
            // ratio: [null, null, null, null, null, null, null, null, null,
            //     null, null, null, null, null, null, null, null, null,
            //     null, null, null, null, null, null, null, null, null,],//比值
            // passRate: [null, null, null, null, null, null, null, null, null,
            //     null, null, null, null, null, null, null, null, null,
            //     null, null, null, null, null, null, null, null, null,],//合格率
            isNormal: [],
            // person: this.props.person
        }
    }

    /**
     * 第一列的时间变化
     */
    /**初始化**/
    componentDidMount() {
        //绑定ref
        this.props.onRef(this);
    }

    componentWillMount() {
        const allTime = [
            ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00'],
            ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
            ['16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
        ];
        this.setState({
            Time: [...allTime[this.props.timeChose]],
            Data: this.props.FormData,
        });
    }

    /**更新props**/
    componentWillReceiveProps(nextProps) {
        const allTime = [
            ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00'],
            ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
            ['16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00']
        ];
        this.setState({
            Time: [...allTime[nextProps.timeChose]],
            Data: nextProps.FormData,
        });
    }


    // updataData_Initial(zhibiao) {
    //     let temp1 = 0;//计算均值和合格率的临时数据
    //     let temp2 = 0;
    //     let temp3 = 0;
    //     let str = '';//计算合格比率的临时数据
    //     let inputCount0 = [], inputCount8 = [], inputCount16 = [];//各班次输入的总数
    //     let passCount0 = [], passCount8 = [], passCount16 = [];//各班次的合格数
    //     let passRate0 = [], passRate8 = [], passRate16 = [];//各班次的合格率
    //     let ratio0 = [], ratio8 = [], ratio16 = [];//各班次的合格比率
    //     //计算合格率部分
    //     for (let i = 0; i < 9; i++) {//i是列
    //         inputCount0[i] = 0;//0点班输入的总数
    //         passCount0[i] = 0;//0点班合格数
    //         inputCount8[i] = 0;//8点班输入的总数
    //         passCount8[i] = 0;//8点班合格数
    //         inputCount16[i] = 0;//16点班输入的总数
    //         passCount16[i] = 0;//16点班合格数
    //         for (let j = 0; j <= 7; j++) {//j是行
    //             if (!isNaN(this.state.Data[j]['shuju'][i]) && (this.state.Data[j]['shuju'][i] != null)) {
    //                 inputCount0[i]++;
    //                 if (this.state.Data[j]['shuju'][i] <= zhibiao[i]) {
    //                     passCount0[i]++;
    //                 }
    //             }
    //             if (inputCount0[i] === 0) {
    //                 str = null;
    //                 temp1 = null;
    //             }
    //             else {
    //                 str = passCount0[i] + '\/' + inputCount0[i];
    //                 if (isNaN(temp1 = passCount0[i] / inputCount0[i])) {
    //                     temp1 = null;
    //                 }
    //                 else {
    //                     temp1 = Number(temp1 * 100).toFixed(1) + '%';
    //                 }
    //             }
    //             ratio0[i] = str;
    //             passRate0[i] = temp1;
    //         }
    //         for (let j = 8; j <= 15; j++) {//j是行
    //             if (!isNaN(this.state.Data[j]['shuju'][i]) && (this.state.Data[j]['shuju'][i] != null)) {
    //                 inputCount8[i]++;
    //                 if (this.state.Data[j]['shuju'][i] <= zhibiao[i]) {
    //                     passCount8[i]++;
    //                 }
    //             }
    //             if (inputCount8[i] === 0) {
    //                 str = null;
    //                 temp1 = null;
    //             }
    //             else {
    //                 str = passCount8[i] + '\/' + inputCount8[i];
    //                 if (isNaN(temp1 = passCount8[i] / inputCount8[i])) {
    //                     temp1 = null;
    //                 }
    //                 else {
    //                     temp1 = Number(temp1 * 100).toFixed(1) + '%';
    //                 }
    //             }
    //             ratio8[i] = str;
    //             passRate8[i] = temp1;
    //         }
    //         for (let j = 16; j <= 23; j++) {//j是行
    //             if (!isNaN(this.state.Data[j]['shuju'][i]) && (this.state.Data[j]['shuju'][i] != null)) {
    //                 inputCount16[i]++;
    //                 if (this.state.Data[j]['shuju'][i] <= zhibiao[i]) {
    //                     passCount16[i]++;
    //                 }
    //             }
    //             if (inputCount16[i] === 0) {
    //                 str = null;
    //                 temp1 = null;
    //             }
    //             else {
    //                 str = passCount16[i] + '\/' + inputCount16[i];
    //                 if (isNaN(temp1 = passCount16[i] / inputCount16[i])) {
    //                     temp1 = null;
    //                 }
    //                 else {
    //                     temp1 = Number(temp1 * 100).toFixed(1) + '%';
    //                 }
    //             }
    //             ratio16[i] = str;
    //             passRate16[i] = temp1;
    //         }
    //         let ratio = ratio0.concat(ratio8);
    //         ratio = ratio.concat(ratio16);
    //         let passRate = passRate0.concat(passRate8);
    //         passRate = passRate.concat(passRate16);
    //         this.setState({
    //             ratio: ratio,
    //             passRate: passRate,
    //         })
    //     }
    //     //计算均值的部分
    //     let average0 = [], average8 = [], average16 = [];//各班次的合格率
    //     for (let i = 0; i < 9; i++) {
    //         temp1 = 0;
    //         temp2 = 0;
    //         temp3 = 0;
    //         if (inputCount0[i] === 0) {
    //             temp1 = null;
    //         }
    //         else {
    //             for (let j = 0; j < 8; j++) {
    //                 if (!isNaN(this.state.Data[j]['shuju'][i])) {
    //                     temp1 += this.state.Data[j]['shuju'][i];
    //                 }
    //             }
    //             if (isNaN(temp1 = temp1 / inputCount0[i])) {
    //                 temp1 = 0;
    //             }
    //             temp1 = temp1.toFixed(3);
    //         }
    //         average0[i] = temp1;
    //         if (inputCount8[i] === 0) {
    //             temp2 = null;
    //         }
    //         else {
    //             for (let j = 8; j < 16; j++) {
    //                 if (!isNaN(this.state.Data[j]['shuju'][i])) {
    //                     temp2 += this.state.Data[j]['shuju'][i];
    //                 }
    //             }
    //             if (isNaN(temp2 = temp2 / inputCount8[i])) {
    //                 temp2 = 0;
    //             }
    //             temp2 = temp2.toFixed(3);
    //         }
    //         average8[i] = temp2;
    //         if (inputCount16[i] === 0) {
    //             temp3 = null;
    //         }
    //         else {
    //             for (let j = 16; j < 24; j++) {
    //                 if (!isNaN(this.state.Data[j]['shuju'][i])) {
    //                     temp3 += this.state.Data[j]['shuju'][i];
    //                 }
    //             }
    //             if (isNaN(temp3 = temp3 / inputCount16[i])) {
    //                 temp3 = 0;
    //             }
    //             temp3 = temp3.toFixed(3);
    //         }
    //         average16[i] = temp3;
    //     }
    //     let average = average0.concat(average8);
    //     average = average.concat(average16);
    //     this.setState({
    //         average: average
    //     });
    //     //是否正常的更新部分
    //     let newNormal = [];
    //     for (let i = 0; i < 24; i++) {
    //         if (!isNaN(this.state.Data[i]['shuju'][0]) && (this.state.Data[i]['shuju'][0] != null)) {
    //             if (this.state.Data[i]['shuju'][0] <= zhibiao[0]) {
    //                 newNormal[i] = '正常';
    //             }
    //             else {
    //                 newNormal[i] = '异常';
    //             }
    //         }
    //         else {
    //             newNormal[i] = '';
    //         }
    //     }
    //     this.setState({
    //         isNormal: newNormal
    //     })
    // }

    /***
     * 进行底部的合格率、平均数的计算更新以及是否正常的判断
     **/
    // updataData(zhibiao) {
    //     let temp1 = 0;
    //     let inputCount = [];
    //     let passCount = [];
    //     let str = '';
    //     let xiaoshi = this.props.timeChose * 8;//都加上选择的时间
    //     for (let i = 0; i < 9; i++) {//i是列
    //         inputCount[i] = 0;//输入的总数
    //         passCount[i] = 0;//合格数
    //         for (let j = xiaoshi; j < xiaoshi + 8; j++) {//j是行
    //             if (!isNaN(this.state.Data[j]['shuju'][i]) && (this.state.Data[j]['shuju'][i] != null)) {
    //                 inputCount[i]++;
    //                 if (this.state.Data[j]['shuju'][i] <= zhibiao[i]) {
    //                     passCount[i]++;
    //                 }
    //             }
    //             if (inputCount[i] === 0) {
    //                 str = null;
    //                 temp1 = null;
    //             }
    //             else {
    //                 str = passCount[i] + '\/' + inputCount[i];
    //                 if (isNaN(temp1 = passCount[i] / inputCount[i])) {
    //                     temp1 = null;
    //                 }
    //                 else {
    //                     temp1 = Number(temp1 * 100).toFixed(1) + '%';
    //                 }
    //             }
    //             const ratio = this.state.ratio;
    //             const passRate = this.state.passRate;
    //             ratio[i + this.props.timeChose * 9] = str;
    //             // console.log(ratio)
    //             passRate[i + this.props.timeChose * 9] = temp1;
    //             this.setState({
    //                 ratio: ratio,//比值
    //                 passRate: passRate//合格率
    //             })
    //         }
    //     }
    //     //计算均值的部分
    //     for (let i = 0; i < 9; i++) {
    //         temp1 = 0;
    //         if (inputCount[i] === 0) {
    //             temp1 = null;
    //         }
    //         else {
    //             for (let j = xiaoshi; j < xiaoshi + 8; j++) {
    //                 if (!isNaN(this.state.Data[j]['shuju'][i])) {
    //                     temp1 += this.state.Data[j]['shuju'][i];
    //                 }
    //             }
    //             if (isNaN(temp1 = temp1 / inputCount[i])) {
    //                 temp1 = 0;
    //             }
    //             temp1 = temp1.toFixed(3);
    //         }
    //         let average = this.state.average;
    //         average[i + this.props.timeChose * 9] = temp1;
    //         this.setState({
    //             average: average
    //         })
    //     }
    //     //是否正常的更新部分
    //     for (let i = xiaoshi; i < xiaoshi + 8; i++) {
    //         const newNormal = this.state.isNormal;
    //         if (!isNaN(this.state.Data[i]['shuju'][0]) && (this.state.Data[i]['shuju'][0] != null)) {
    //             if (this.state.Data[i]['shuju'][0] <= zhibiao[0]) {
    //                 newNormal[i] = '正常';
    //             }
    //             else {
    //                 newNormal[i] = '异常';
    //             }
    //         }
    //         else {
    //             newNormal[i] = '';
    //         }
    //         this.setState({
    //             isNormal: newNormal
    //         })
    //     }
    // }


    /**
     * 表格输入数据变化的监听，同时所有的数据更新
     **/

    onInputNumberChange2 = (event, indexH, indexL) => {
        let NewData = this.state.Data;
        let xiaoshi = indexH + this.props.timeChose * 8;
        const rep = /^(\-)*(\d+)\.(\d{2}).*$/;
        event = event.replace(rep, '$1$2.$3');
        NewData[xiaoshi]["shuju"][indexL] = event;
        this.setState({
            Data: NewData
        });
    };
//控制输入框的样式
     changeStyle = (value) => {
        if (value) {
            // if (isNaN(value) || value > 100) {
            //     return {
            //         borderColor: 'red',
            //         color:'red',
            //     }
            // }
            if (isNaN(value)) {
                        return {
                            borderColor: 'red',
                            color:'red',
                        }
            }
        }           
    }

    //上传当前数据后台
    /**点击暂存之后上传当前行的数据到后台**start**/
    postToHome(i) {//i是行数
        const xiaoshi = i + this.props.timeChose * 8;
        const a = this.state.Data[xiaoshi]['shuju'];
        const shuju = a.join(',');
        const jsondata = {
            "data": [
                {
                    "riqi": this.props.riqi,
                    "xiaoshi": xiaoshi,
                    "leixing": "ZKS",
                    "zhonglei": 1,
                    "shuju": shuju,
                    "name": window.localStorage.name,
                }
            ]
        };
        fetch("/api/ZhongKS/save", {
            method: 'POST',
            body: JSON.stringify(jsondata), // data can be `string` or {object}!
            headers: {
                'Content-Type': 'application/json',
                'authorization': window.localStorage.authorization,
            }
        })
            .then(res => res.json())
            .then(data => {
                if (data['code'] === 0) {
                    message.info('暂存成功');
                    const Data = this.state.Data;
                    Data[xiaoshi]['name'] = window.localStorage.name;
                    this.setState({
                        Data: Data
                    })
                }
            })
            .catch(error => console.error('Error:', error))
            .then(response => console.log('Success:', response));
    }
    /**点击暂存之后上传当前行的数据到后台**end**/

    //依次提交所有数据
    postAllToHome() {
        const timeChoose = this.props.timeChose * 8;
        for (let i = timeChoose; i < timeChoose + 8; i++) {
            const a = this.state.Data[i]['shuju'];
            const shuju = a.join(',');
            const jsondata = {
                "data": [
                    {
                        "riqi": this.props.riqi,
                        "xiaoshi": i,
                        "leixing": "ZKS",
                        "zhonglei": 1,
                        "shuju": shuju,
                        "name": window.localStorage.name,
                    }
                ]
            };
            fetch("/api/ZhongKS/save", {
                method: 'POST',
                body: JSON.stringify(jsondata), // data can be `string` or {object}!
                headers: {
                    'Content-Type': 'application/json',
                    'authorization': window.localStorage.authorization,
                }
            })
                .then(res => res.json())
                .then(data => {
                    if (data['code'] === 0) {
                        message.info('提交' + i + '点钟数据成功');
                        const Data = this.state.Data;
                        Data[i]['name'] = window.localStorage.name;
                        this.setState({
                            Data: Data
                        })
                    }
                    else if (data['code'] === 1) {
                        message.error('提交' + i + '点钟数据失败');
                    }
                })
                .catch(error => console.error('Error:', error))
        }
    }

    render() {
        /**表头的设计**start**/
        const columns_tab1 = [
            {
                title: '时间',
                dataIndex: 'time',
                width: '5.5%',
            },
            {
                title: 'XX温度/' + this.state.FuHao[0],
                key: 'XXWD',
                children: [{
                    title: 'C1',
                    key: 'C1',
                    children: [{
                        title: '出口1',
                        dataIndex: 'C1CK1',
                        width: '5.5%',
                    }, {
                        title: '出口2',
                        dataIndex: 'C1CK2',
                        width: '5.5%',
                    },]
                }, {
                    title: 'C2',
                    key: 'C2',
                    children: [{
                        title: '出口',
                        dataIndex: 'C2CK',
                        width: '5.5%',
                    },]
                }, {
                    title: 'C3',
                    key: 'C3',
                    children: [{
                        title: '出口',
                        dataIndex: 'C3CK',
                        width: '5.5%',
                    },]
                }, {
                    title: 'C4',
                    key: 'C4',
                    children: [{
                        title: '出口',
                        dataIndex: 'C4CK',
                        width: '5.5%',
                    },]
                }, {
                    title: 'C5',
                    key: 'C5',
                    children: [{
                        title: '出口',
                        dataIndex: 'C5CK',
                        width: '5.5%',
                    }, {
                        title: '下料',
                        dataIndex: 'C5XL',
                        width: '5.5%',
                    },]
                }, {
                    title: '分解炉',
                    key: 'FJL',
                    children: [{
                        title: '出口',
                        dataIndex: 'FJCK',
                        width: '5.5%',
                    }, {
                        title: '中部',
                        dataIndex: 'FJZB',
                        width: '5.5%',
                    },]
                }, {
                    title: '煤室温度',
                    dataIndex: 'MSWD',
                    width: '5.5%',
                }, {
                    title: 'XX最高',
                    dataIndex: 'XXZG',
                    width: '5.5%',
                }, {
                    title: '二次风X',
                    dataIndex: 'ECFX',
                    width: '5.5%',
                }, {
                    title: '瓦温最高',
                    dataIndex: 'WWZG',
                    width: '5.5%',
                },],
            },
            {
                title: 'XX/' + this.state.FuHao[1],
                key: 'XX',
                children: [
                    {
                        title: '煅室',
                        dataIndex: 'XXDS',
                        width: '5.5%',
                    },
                    {
                        title: '窑头',
                        dataIndex: 'XXYT',
                        width: '5.5%',
                    },
                ],
            }, {
                title: '人员',
                dataIndex: 'person',
                width: '5.5%',
            }, {
                title: '暂存',
                dataIndex: 'btn_save',
                width: '6.5%',
            }
        ];
        const columns_tab2 = [
                {
                    title: '时间',
                    dataIndex: 'time',
                    width: '5.5%',
                },
                {
                    title: '电机电类/' + this.state.FuHao[2],
                    key: 'DJDL',
                    children: [{
                        title: '高温风机电X',
                        dataIndex: 'GWFJ',
                    }, {
                        title: '提升机',
                        dataIndex: 'TSJ',
                    }, {
                        title: 'X风机',
                        dataIndex: 'XFJ',
                    }, {
                        title: '煅烧机',
                        dataIndex: 'DSJ',
                    }, {
                        title: 'XXX',
                        dataIndex: 'XXX',
                    },]
                }, {
                    title: 'XXX/' + this.state.FuHao[3],
                    key: 'XXX',
                    width: '5.5%',
                    children: [{
                        title: '一室压力',
                        dataIndex: 'YSYL',
                    },]
                }, {
                    title: 'XXXXX/' + this.state.FuHao[4],
                    key: 'XXXX',
                    children: [{
                        title: 'O₂含量',
                        dataIndex: 'YQHL',
                    }, {
                        title: 'CO含量',
                        dataIndex: 'COHL',
                    }, {
                        title: 'Nax含量',
                        dataIndex: 'NAXHL',
                    },]
                }, {
                    title: '电XX',
                    key: 'DXX',
                    width: '5.5%',
                    children: [{
                        title: '电压/' + this.state.FuHao[5],
                        key: 'DY',
                        children: [{
                            title: '1#',
                            dataIndex: 'DY1',
                        }, {
                            title: '2#',
                            dataIndex: 'DY2',
                        }, {
                            title: '3#',
                            dataIndex: 'DY3',
                        }]
                    }, {
                        title: '电流/' + this.state.FuHao[6],
                        key: 'DL',
                        children: [{
                            title: '1#',
                            dataIndex: 'DL1',
                        }, {
                            title: '2#',
                            dataIndex: 'DL2',
                        }, {
                            title: '3#',
                            dataIndex: 'DL3',
                        }]
                    }]
                },
                {
                    title: '人员',
                    dataIndex:
                        'person',
                    width:
                        '5.5%',
                }
                ,
                {
                    title: '暂存',
                    dataIndex:
                        'btn_save',
                    width:
                        '6.5%',
                }
            ]
        ;
        /**表头的设计**end**/

        /**限制输入数值位数的函数**start**/
        const limitDecimals = (value: string | number): string => {
            const reg = /^(\-)*(\d+)\.(\d\d).*$/;
            if (typeof value === 'string') {
                return !isNaN(Number(value)) ? value.replace(reg, '$1$2.$3') : ''
            } else if (typeof value === 'number') {
                return !isNaN(value) ? String(value).replace(reg, '$1$2.$3') : ''
            } else {
                return ''
            }
        };
        /**限制输入数值位数的函数**end**/

        /**中间八行的数据输入**start**/
        const data_tab1 = [];
        const Data = this.state.Data;
        for (let i = 0; i < 8; i++) {
            const xiaoshi = this.props.timeChose * 8;
            const value = Data[i + xiaoshi]['shuju'];
            data_tab1.push(
                {
                    time: this.state.Time[i],
                    C1CK1: <span><Input
                    style={this.changeStyle(value[0])}
                    defaultValue={''}
                    value={isNaN(value[0]) ? null : value[0]}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 0)}
                /></span>,
                    C1CK2:<span><Input
                    style={this.changeStyle(value[1])}
                    defaultValue={''}
                    value={isNaN(value[1]) ? null : value[1]}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 1)}
                /></span>,
                    C2CK: <span><Input
                    style={this.changeStyle(value[2])}
                    defaultValue={''}
                    value={isNaN(value[2]) ? null : value[2]}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 2)}
                /></span>,

                    C3CK: <span><Input
                    style={this.changeStyle(value[3])}
                    defaultValue={''}
                    value={isNaN(value[3]) ? null : value[3]}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 3)}
                /></span>,

                    C4CK: <span><Input
                    style={this.changeStyle(value[4])}
                    defaultValue={''}
                    value={isNaN(value[4]) ? null : value[4]}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 4)}
                /></span>,

                    C5CK: <span><Input
                    style={this.changeStyle(value[5])}
                    defaultValue={''}
                    value={isNaN(value[5]) ? null : value[5]}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 5)}
                /></span>,

                    C5XL:<span><Input
                    style={this.changeStyle(value[6])}
                    defaultValue={''}
                    value={isNaN(value[6]) ? null : value[6]}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 6)}
                /></span>,

                    FJCK: <span><Input
                    style={this.changeStyle(value[7])}
                    defaultValue={''}
                    value={isNaN(value[7]) ? null : value[7]}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 7)}
                /></span>,

                    FJZB: <span><Input
                    style={this.changeStyle(value[8])}
                    defaultValue={''}
                    value={isNaN(value[8]) ? null : value[8]}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 8)}
                /></span>,
                    MSWD:<span><Input
                    style={this.changeStyle(value[9])}
                    defaultValue={''}
                    value={isNaN(value[9]) ? null : value[9]}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 9)}
                /></span>,

                    XXZG: <span><Input
                    style={this.changeStyle(value[10])}
                    defaultValue={''}
                    value={isNaN(value[10]) ? null : value[10]}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 10)}
                /></span>,

                    ECFX: <span><Input
                    style={this.changeStyle(value[11])}
                    defaultValue={''}
                    value={isNaN(value[11]) ? null : value[11]}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 11)}
                /></span>,

                    WWZG: <span><Input
                    style={this.changeStyle(value[12])}
                    defaultValue={''}
                    value={isNaN(value[12]) ? null : value[12]}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 12)}
                /></span>,

                    XXDS: <span><Input
                    style={this.changeStyle(value[13])}
                    defaultValue={''}
                    value={isNaN(value[13]) ? null : value[13]}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 13)}
                /></span>,

                    XXYT: <span><Input
                    style={this.changeStyle(value[14])}
                    defaultValue={''}
                    value={isNaN(value[14]) ? null : value[14]}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 14)}
                /></span>,

                    person: Data[i + xiaoshi]['name'],
                    btn_save: <Button type='primary' onClick={() => this.postToHome(i)}>暂存</Button>,
                }
            )
        }
        const data_tab2 = [];
        for (let i = 0; i < 8; i++) {
            const xiaoshi = this.props.timeChose * 8;
            const value = Data[i + xiaoshi]['shuju'];
            const tab = 15;
            // console.log(value[0]);
            data_tab2.push(
                {
                    time: this.state.Time[i],
                    GWFJ: <span><Input
                    style={this.changeStyle(value[tab])}
                    value={isNaN(value[tab]) ? null : value[tab]}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, tab)}
                /></span>,
                    TSJ: <span><Input
                    style={this.changeStyle(value[1+tab])}
                    value={isNaN(value[tab+1]) ? null : value[tab+1]}
                    defaultValue={''}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 1+tab)}
                /></span>,
                    XFJ: <span><Input
                    style={this.changeStyle(value[2+tab])}
                    value={isNaN(value[tab+2]) ? null : value[tab+2]}
                    defaultValue={''}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 2+tab)}
                /></span>,
                    DSJ: <span><Input
                    style={this.changeStyle(value[3+tab])}
                    value={isNaN(value[tab+3]) ? null : value[tab+3]}
                    defaultValue={''}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 3+tab)}
                /></span>,
                    XXX: <span><Input
                    style={this.changeStyle(value[4+tab])}
                    value={isNaN(value[tab+4]) ? null : value[tab+4]}
                    defaultValue={''}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 4+tab)}
                /></span>,
                    YSYL: <span><Input
                    style={this.changeStyle(value[5+tab])}
                    value={isNaN(value[tab+5]) ? null : value[tab+5]}
                    defaultValue={''}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 5+tab)}
                /></span>,
                    YQHL: <span><Input
                    style={this.changeStyle(value[6+tab])}
                    value={isNaN(value[tab+6]) ? null : value[tab+6]}
                    defaultValue={''}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 6+tab)}
                /></span>,
                    COHL: <span><Input
                    style={this.changeStyle(value[7+tab])}
                    value={isNaN(value[tab+7]) ? null : value[tab+7]}
                    defaultValue={''}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 7+tab)}
                /></span>,
                    NAXHL:<span><Input
                    style={this.changeStyle(value[8+tab])}
                    value={isNaN(value[tab+8]) ? null : value[tab+8]}
                    defaultValue={''}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 8+tab)}
                /></span>,
                    DY1: <span><Input
                    style={this.changeStyle(value[9+tab])}
                    value={isNaN(value[tab+9]) ? null : value[tab+9]}
                    defaultValue={''}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 9+tab)}
                /></span>,
                    DY2: <span><Input
                    style={this.changeStyle(value[10+tab])}
                    value={isNaN(value[tab+10]) ? null : value[tab+10]}
                    defaultValue={''}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 10+tab)}
                /></span>,
                    DY3: <span><Input
                    style={this.changeStyle(value[11+tab])}
                    value={isNaN(value[tab+11]) ? null : value[tab+11]}
                    defaultValue={''}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 11+tab)}
                /></span>,
                    DL1: <span><Input
                    style={this.changeStyle(value[12+tab])}
                    value={isNaN(value[tab+12]) ? null : value[tab+12]}
                    defaultValue={''}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 12+tab)}
                /></span>,
                    DL2: <span><Input
                    style={this.changeStyle(value[13+tab])}
                    value={isNaN(value[tab+13]) ? null : value[tab+13]}
                    defaultValue={''}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 13+tab)}
                /></span>,
                    DL3: <span><Input
                    style={this.changeStyle(value[14+tab])}
                    value={isNaN(value[tab+14]) ? null : value[tab+14]}
                    defaultValue={''}
                    onChange={event => this.onInputNumberChange2(event.target.value, i, 14+tab)}
                /></span>,
                    person: Data[i + xiaoshi]['name'],
                    btn_save: <Button type='primary' onClick={() => this.postToHome(i)}>暂存</Button>,
                }
            )
        }
        /**中间八行的数据输入**end**/

        /**数据的自动处理显示部分**start**/
// const xiaoshi = this.props.timeChose * 9;
// data.push(
//     {
//         time: '平均',
//         FCaO: this.state.average[0 + xiaoshi],
//         ChuFineness: this.state.average[1 + xiaoshi],
//         Chu900: this.state.average[2 + xiaoshi],
//         ChuWater: this.state.average[3 + xiaoshi],
//         RuFineness: this.state.average[4 + xiaoshi],
//         Ru900: this.state.average[5 + xiaoshi],
//         RuWater: this.state.average[6 + xiaoshi],
//         CoalFineness: this.state.average[7 + xiaoshi],
//         CoalWater: this.state.average[8 + xiaoshi]
//
//     }, {
//         time: '总合格数\/总数',
//         FCaO: this.state.ratio[0 + xiaoshi],
//         ChuFineness: this.state.ratio[1 + xiaoshi],
//         Chu900: this.state.ratio[2 + xiaoshi],
//         ChuWater: this.state.ratio[3 + xiaoshi],
//         RuFineness: this.state.ratio[4 + xiaoshi],
//         Ru900: this.state.ratio[5 + xiaoshi],
//         RuWater: this.state.ratio[6 + xiaoshi],
//         CoalFineness: this.state.ratio[7 + xiaoshi],
//         CoalWater: this.state.ratio[8 + xiaoshi]
//
//     }, {
//         time: '合格率',
//         FCaO: this.state.passRate[0 + xiaoshi],
//         ChuFineness: this.state.passRate[1 + xiaoshi],
//         Chu900: this.state.passRate[2 + xiaoshi],
//         ChuWater: this.state.passRate[3 + xiaoshi],
//         RuFineness: this.state.passRate[4 + xiaoshi],
//         Ru900: this.state.passRate[5 + xiaoshi],
//         RuWater: this.state.passRate[6 + xiaoshi],
//         CoalFineness: this.state.passRate[7 + xiaoshi],
//         CoalWater: this.state.passRate[8 + xiaoshi]
//     }
// );
        /**数据的自动处理显示部分**end**/
        function callback(key) {
            this.setState({
                TabChoose: key
            });
        }

        return (
            <div className="ZKSupper">
                {/*表格填写*/}
                <Tabs defaultActiveKey="0" onChange={callback.bind(this)} >
                    <TabPane tab="表1" key="0"><Table
                        className="ZKSupper_table1" columns={columns_tab1} bordered
                        dataSource={data_tab1} pagination={false}/>
                    </TabPane>
                    <TabPane tab="表2" key="1"><Table
                        className="ZKSupper_table2" columns={columns_tab2} bordered
                        dataSource={data_tab2} pagination={false}/>
                    </TabPane>
                </Tabs>

            </div>
        );
    }

}

export default UpperPartOfTheForm;